<template>
    <div class="is-require">
      <van-cell :value="displayData" :required="required" :title="title" is-link @click="showPopup = true" />
      <van-popup v-model="showPopup" position="bottom" :overlay="overlay">
        <van-area :area-list="areaList"  @confirm="onConfirm" :value="areaCode" @cancel="onCancel" :columns-num="columnsNum" title="选择地址" />
      </van-popup>
    </div>
</template>
<script>
import Vue from 'vue'
import { Area, Popup } from 'vant';
import areaList from '../../static/js/area'


export default {
  name: 'zx-picker',
  components:{
    vanPopup: Popup,
    vanArea: Area
  },
  props: {
    value: {
      type: [String, Number, Array]
    },
    overlay: {
      type: Boolean,
      default() {
        return true;
      }
    },
    required: {
      type: Boolean,
      default() {
        return false;
      }
    },
    columnsNum: {
      type: [Number],
      default: 2
    },
    title: {
      type: String
    },
    dataList: {
      type: Array,
      require: true,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      showPopup: false,
      selectValue: '',
      areaList: areaList,
      areaCode: ''
    };
  },
  watch: {},
  mounted() {
    this.selectValue = this.value;
      this.areaCode = this.value.length !== 0 ? this.value[this.value.length-1].code : '';
  },
  computed: {
    displayData() {
      let data = ''
      this.value.forEach(item => {
          data += item.name + ' ';
      })
      return data;
    }
  },
  methods: {
    onConfirm(value, index) {
      this.showPopup = false;
      this.$emit('input', value);
    },
    onCancel() {
      this.showPopup = false;
    }
  }
}
</script>
